<template>
  <div @click="handleAddFile" class="upload-file">
    <slot></slot>
    <input ref="input" type="file" @input="handleUpload" style="display:none">
  </div>
</template>

<script>
export default {
  data () {
    return {
        
    };
  },
  props:{
      phone:{
          type:String,
          default:function(){
              return ""
          }
      },
      name:{
          type:String,
          default:function(){
              return "name"
          }
      },
      model:{
          type:String,
          default:function(){
              return ""
          }
      },
      action:{
          type:String,
          required: true,
      }
  },
  components: {},
  created() {
  },
  mounted() {},
  methods: {
      handleAddFile(){
          this.$refs.input.click();
      },
      handleUpload(e){
           let file = e.target.files[0];  
           if(!file){
               return;
           }
           let _this = this;
            let param = new FormData(); //创建form对象  
            param.append(this.name,file); //通过append向form对象添加数据  
            if(this.phone===null || this.phone === ''){
                this.$message.error("请确保商户联系人手机填写正确！再上传证件照！");
                return;
            }
            param.append('phone',this.phone); // 添加手机号
           let config = { headers: { 'Content-Type': 'multipart/form-data' }};
           this.$Http.post(this.action,param,config).then(res=>{
               try {
                    _this.$emit('onSuccess',_this.model,res)
               } catch (error) {
                   this.$message("回调执行失败！")
               }
               
           }).catch(err=>{
               this.$message.error("上传失败！");
           })
      }
  }
}

</script>
<style scoped>
.upload-file{
    min-width: 50px;
    min-height: 50px;
    display: inline-block;
    box-sizing: border-box;
    border: 1px solid #f5f5f5;
    overflow: hidden;
}
</style>